<!--
 * @Author       : xiangmin
 * @File         : 描述列表
 * @Date         : 2023-06-25 14:55:09
 * @LastEditors  : xiangmin
 * @LastEditTime : 2024-06-27 14:51:13
-->
<!-- prettier-ignore -->
<template>
	<a-descriptions v-bind="$attrs">
		<template v-for="(_, name) in $slots" #[name]>
			<slot :name="name"></slot>
		</template>
		<a-descriptions-item
			v-for="(item, index) in descFields"
			:key="index"
			:label="item.label"
			v-bind="item.itemProps"
		>
			<component
				v-if="isVNode(item.value)"
				:is="item.value"
			>
			</component>
			<template v-else>
				{{ item.value || '-' }}
			</template>
		</a-descriptions-item>
	</a-descriptions>
</template>

<script setup lang="ts">
import { isVNode } from 'vue'

const { fields, dataSource } = defineProps<{
	fields: CDescFields
	dataSource: Record<string, any>
}>()

const descFields = computed(() => {
	return fields.map(item => {
		let { value, field, label, ...others } = item
		value = typeof value === 'function' ? value(dataSource) : dataSource[field as string] || '-'
		label = typeof label === 'function' ? label(dataSource) : label
		return {
			value,
			label,
			...others
		}
	})
})
</script>

<style scoped lang="less">
:deep(.ant-descriptions-header) {
	margin-bottom: 10px !important;
}

:deep(.ant-descriptions-item) {
	padding-bottom: 10px !important;
}
</style>
